<template>
	<view class="recruitIndex">
		<top-bar :home="false" :backState="2000" :transparentFixedFontColor="topTabFontColor" :type="topTabType" title="体验官招募活动"></top-bar>
		<view class="recruitIndexTopCont" :style="{ paddingTop: (statusBarHeight*2+88) + 'rpx' }">
			<view class="contBox">
				<image class="recruitIndexTit" src="https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexTit.png" mode=""></image>
				<image @click="linkGo(1)" class="linkBtn linkBtn1" src="https://lovebirdopen.com/static/img/recruitOfficer/linkBtn1.png" mode=""></image>
				<image @click="linkGo(2)" class="linkBtn linkBtn2" src="https://lovebirdopen.com/static/img/recruitOfficer/linkBtn2.png" mode=""></image>
				<view class="getNotification">
					<view class="eachNotification">
						<view class="">好酒****称</view>
						<view class="">获得了500毫升九仙御贡</view>
					</view>
					<view class="eachNotification">
						<view class="">好酒****称</view>
						<view class="">获得了500毫升九仙御贡</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 招募管活动时间 -->
		<view class="recruitTimeBox">
			<view class="contBox">
				<view class="contTopBox">
					<image class="titImg" src="https://lovebirdopen.com/static/img/recruitOfficer/recruitTimeTit.png" mode=""></image>
					<view class="activityTime">活动时间：2021年2月28日—2021年3月3日</view>
				</view>
				<view class="contBottomBox">
					<image class="wineBottle" src="https://lovebirdopen.com/static/img/recruitOfficer/wineBottle.png" mode=""></image>
					<view class="tips">五谷天然发酵，经传统酿酒法</view>
					<view class="tips">采高山雪水，封藏于民间邛窖，原浆出坛</view>
					<view class="tips">让酒香四溢，入口清甜、细腻回绵</view>
				</view>
			</view>
		</view>
		<!-- 邀请好友按钮 -->
		<view class="inviteFriends">邀请好友助力</view>
		<!-- 邀请方式 -->
		<view class="inviteWay">
			<view class="way way1">
				<image class="wayImg" src="https://lovebirdopen.com/static/img/recruitOfficer/way1.svg" mode=""></image>
				微信朋友圈
			</view>
			<view class="way way2">
				<image class="wayImg" src="https://lovebirdopen.com/static/img/recruitOfficer/way2.svg" mode=""></image>
				面对面扫码邀请
			</view>
		</view>
		<view class="bigBox">
			<!-- 邀请9位好友即可成团 -->
			<view class="bigGroupBox">
				<view class="groupTit">邀请9位好友即可成团</view>
				<view class="countDown">
					成团倒计时
					<u-count-down class="countDownI" timestamp="97124" separator="colon" bg-color="#FF5238" color="#fff" separator-color="#FF5238" separator-size="28" font-size="28" :show-days="false"></u-count-down>
				</view>
				<view class="groupMembers clearFix">
					<view class="eachSeat">
						<view class="img img1">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexTit.png" mode=""></image>
						</view>
						<view class="name name1 ellipsis">我的名字</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<view class="img img2">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/addPlus.svg" mode=""></image>
						</view>
						<view class="name name2">待助力</view>
					</view>
					<view class="eachSeat">
						<u-circle-progress :percent="11" inactive-color="#FFEAE7" active-color="#FF5238" width="84" border-width="4" bg-color="transparent">
							<view class="prizeImg">
								<image src="https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexBj.png" mode=""></image>
							</view>
						</u-circle-progress>
						<view class="name name3">九仙御贡</view>
					</view>
				</view>
				<!-- 兑换奖品按钮 -->
				<view class="ePrizesButton">
					<view class="btn">兑换奖品</view>
				</view>
				<!-- 活动已结束按钮 -->
				<view class="aEndedButton">
					<view class="btn">活动已结束</view>
				</view>
				<!-- 仙友助力流程 -->
				<view class="helpProcess">
					<view class="tit">仙友助力流程</view>
					<view class="processBox clearFix">
						<view class="cont">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/helpProcess1.svg" mode=""></image>
							<view class="processTit">分享好友</view>
						</view>
						<view class="arrow">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/processArrow.svg" mode=""></image>
						</view>
						<view class="cont">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/helpProcess2.svg" mode=""></image>
							<view class="processTit">登录小程序</view>
						</view>
						<view class="arrow">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/processArrow.svg" mode=""></image>
						</view>
						<view class="cont">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/helpProcess3.svg" mode=""></image>
							<view class="processTit">助力成功</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 活动奖励 -->
			<view class="activityReward">
				<view class="titImg">
					<image src="https://lovebirdopen.com/static/img/recruitOfficer/activityRewardTit.png" mode=""></image>
				</view>
				<view class="notice">
					公示：已有825位仙友获得奖励
					<u-icon name="arrow-right" color="#EE4231" size="22"></u-icon>
				</view>
				<view class="prizeBox clearFix">
					<view class="eachPrize">
						<view class="eachPrizeCont">
							<view class="prizeImg">
								<image src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
							</view>
							<view class="prizeLabel">-福气满-</view>
							<view class="prizeName">500毫升九仙御贡</view>
							<view class="seePrize">查看奖品</view>
						</view>
					</view>
					<view class="eachPrize">
						<view class="eachPrizeCont">
							<view class="prizeImg">
								<image src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
							</view>
							<view class="prizeLabel">-好运来-</view>
							<view class="prizeName">125毫升九仙御贡</view>
							<view class="seePrize">查看奖品</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 福运九仙 -->
			<view class="fortuneNine">
				<view class="fortuneNineTit">
					<image src="https://lovebirdopen.com/static/img/recruitOfficer/fortuneNineTit.png" mode=""></image>
				</view>
				<view class="fortuneNineCont">
					<view class="eachCont pdr32">
						<image class="mr32" src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
						<view class="contBox">
							<view class="titBox">
								<image src="https://lovebirdopen.com/static/img/recruitOfficer/fortuneNine1.svg" mode=""></image>
								— 邛崃山中有“九仙”
							</view>
							<view class="tipsCont">邛崃位于北纬30度，年平均气温16度年降水量1100毫米，孕育PH弱碱水出52度纯粮酒，藏“九仙御贡”仙酿</view>
						</view>
					</view>
				</view>
				<view class="fortuneNineCont">
					<view class="eachCont pdl32">
						<view class="contBox">
							<view class="titBox">
								<image src="https://lovebirdopen.com/static/img/recruitOfficer/fortuneNine2.svg" mode=""></image>
								— 高山雪水自然仙酿
							</view>
							<view class="tipsCont">祖祖辈辈酿酒用的高山雪水老师傅赞这是一种美妙的天然饮料喝过的人才能懂它的甘甜才可育出“九仙御贡’佳酿</view>
						</view>
						<image class="ml32" src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
					</view>
				</view>
				<view class="fortuneNineCont">
					<view class="eachCont pdr32">
						<image class="mr32" src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
						<view class="contBox">
							<view class="titBox">
								<image src="https://lovebirdopen.com/static/img/recruitOfficer/fortuneNine3.svg" mode=""></image>
								— 传统工艺，传承匠人心
							</view>
							<view class="tipsCont">古法传承，采用高温制曲，二次投料堆积发酵，高温蒸馏，邛窑封藏以时间蕴原浆纯粮酒，出“九仙御贡”</view>
						</view>
					</view>
				</view>
				<view class="fortuneNineCont">
					<view class="eachCont pdl32">
						<view class="contBox">
							<view class="titBox">
								<image src="https://lovebirdopen.com/static/img/recruitOfficer/fortuneNine4.svg" mode=""></image>
								— 国宝级酿酒大师鲁希圣
							</view>
							<view class="tipsCont">“五十年只做一件事，酿酒评酒”一句质朴的话，却是一辈子的坚守只愿做人人喝得起的原浆纯粮酒</view>
						</view>
						<image class="ml32" src="https://lovebirdopen.com/file/2020/12/009e33455243088357d7b00148785a43.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 技术支持 -->
			<view class="technicalSupport">
				<image src="https://lovebirdopen.com/static/img/recruitOfficer/tSupportLogo.svg" mode=""></image>
				<u-icon class="iconMg" name="close" color="rgba(255, 255, 255, 0.7)" size="30"></u-icon>
				邛崍金龙酒厂
			</view>
		</view>
		<!-- 弹窗来啦啦啦啦啦！！！ -->
		<view class="mask"></view>
		<!-- 九仙驾到，天降好礼 -->
		<view class="nineArrive" v-if="nineArrive">
			<view class="popBox">
				<view class="titBox">
					<image src="https://lovebirdopen.com/static/img/recruitOfficer/nineArriveTit.png" mode=""></image>
				</view>
				<view class="tips">恭喜您获得500毫升九仙御贡</view>
				<view class="contBox">	
					<image src="https://lovebirdopen.com/static/img/recruitOfficer/nineArriveCont.png" mode=""></image>
				</view>
				<view class="close">
					<u-icon name="close-circle" color="rgba(255, 255, 255, 0.32)" size="46"></u-icon>
				</view>
			</view>
		</view>
		<!-- 成团失败 -->
		<view class="groupFailure" v-if="groupFailure">
			<view class="popBox">
				<view class="tips1">体验官名额已满</view>
				<view class="tips1">成团失败</view>
				<view class="tips2">可预约参与后续125毫升酒卡活动</view>
				<view class="makeBtn">
					<view class="btn">立即预约</view>
				</view>
			</view>
			<view class="close">
				<u-icon name="close-circle" color="rgba(255, 255, 255, 0.32)" size="46"></u-icon>
			</view>
		</view>
		<!-- 为TA助力 -->
		<view class="helpTa" v-if="helpTa">
			<view class="popBox">
				<view class="contBox">
					<!-- 助力成功/失败之前 -->
					<view class="helpBefore" v-if="helpTaStates==1">
						<view class="headPortrait">
							<image src="https://lovebirdopen.com/file/2021/01/88b7936c391c873674bdccd814902181.jpg" mode=""></image>
						</view>
						<view class="inviterTips">来自倪居然的助力邀请</view>
						<view class="winePattern">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/winePattern.png" mode=""></image>
						</view>
						<view class="tips">帮我助力</view>
						<view class="tips">成团送你125毫升酒卡</view>
					</view>
					<!-- 助力成功/失败之后 -->
					<view class="helpAfter" v-if="helpTaStates==2">
						<view class="helpAfterStates color1">助力成功	</view>
						<view class="tips">恭喜您获得125毫升酒卡</view>
						<view class="winePattern">
							<image src="https://lovebirdopen.com/static/img/recruitOfficer/winePattern.png" mode=""></image>
						</view>
						<view class="inviterTips">可升为团长领取500毫升美酒</view>
					</view>
				</view>
				<view class="helpBtn">为TA助力</view>
			</view>
			<view class="close">
				<u-icon name="close-circle" color="rgba(255, 255, 255, 0.32)" size="46"></u-icon>
			</view>
		</view>
		<!-- 活动规则 -->
		<view class="activityRules" v-if="activityRules">
			<view class="titImg">	
				<image src="https://lovebirdopen.com/static/img/recruitOfficer/activityRulesTit.png" mode=""></image>
			</view>
			<view class="contBox">
				<view class="cont">
					<view class="eachCont">活动采用拼团的方式完成。团长需在48小时内邀请9名成员成功助力，即可获得500ml酒卡；拼团成功，成员亦可获得125ml酒卡，125ml酒卡可用于成员升级成为团长，获得500ml酒卡资格。若成员选择不升级，在有效期内可兑换125ml酒。若用户逾期未进行兑换，则视为放弃权益，平台将不会补发或者让用户重新拥有兑换酒卡的权益。</view>
					<view class="eachCont">具体玩法如下：</view>
					<view class="eachCont">1.活动有效期：2021年xx月xxx日-2021年xx月xx日（名额抢完截止）</view>
					<view class="eachCont">2.团长需在48小时内完成拼团，逾期则不成功。</view>
					<view class="eachCont">3.若参与活动成为团长并拼团成功，系统自动记名已有资格，且不可助力其它团队；若成为团长未拼团成功，系统自动计算符合条件，可再次成为团长参与拼团活动，或在未成团的条件下可助力其它团队1次。</view>
					<view class="eachCont">4.已助力拼团成功的成员，系统自动记名已有资格，不可再助力其它团队；但成员可获得125ml酒卡，且可利用125ml酒卡条件获得团长资格。</view>
					<view class="eachCont">5.在有效期内1000人名额已满，系统将自动截止活动，视为组团（含团长、成员）失败，系统自动计算符合条件，邀请参与其它活动。</view>
					<view class="eachCont">6.成功拼团者，系统自动公布获奖名单，可点击首页‘开年好礼▪获奖名单’查看详情。</view>
					<view class="eachCont">7.已获奖团长，需即时填写收货姓名、收货地址、联系方式等，以便平台统一安排时间发货。</view>
					<view class="eachCont">8.已获奖团长，需参与‘评论’的任务，并提交20字以上内容+3张实拍图发布在产品评价处；平台选取最佳送出万元好礼。（评论具体玩法见‘首席体验官玩法及使用规则’）</view>
					<view class="eachCont">500ml酒卡使用规则见‘500ml酒卡使用规则’。</view>
					<view class="eachCont">125ml酒卡使用规则见‘125ml酒卡使用规则’。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部导航样式
				topTabType:'transparentFixed',
				topTabFontColor:'#fff',
				// 导航栏高度
				statusBarHeight: 0,
				// 团员列表
				memberList:[1,2,3,4,5,6,7,8,9],
				// 各种弹窗趴
				nineArrive:false,
				groupFailure:false,
				helpTa:false,
				helpTaStates:2,
				activityRules:true,
			}
		},
		onLoad: function (option) {
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {//滚动顶部导航的变化
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#fff';
			}

		},
		methods: {
			// 活动规则1&我的奖品2  跳转
			linkGo(index){
				
			},
		}
	}
</script>

<style lang="scss">
	.recruitIndex{
		min-height: 100%;
		padding-bottom: 76rpx;
		background-color: #C42300;
	}
	.recruitIndexTopCont{
		position: relative;
		z-index: 1;
		background: linear-gradient(0deg, #FEEDCF 11.98%, #FF3E3E 100%);
		
		.contBox{
			position: relative;
			padding: 24rpx 0 770rpx;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/recruitIndexBj.png') no-repeat top center;
			background-size: 100% 100%;
		
			.recruitIndexTit{
				width: 100%;
				height: 266rpx;
			}
			
			.linkBtn{
				position: absolute;
				right: 0;
				width: 56rpx;
				height: 142rpx;
			}
			.linkBtn1{
				top: 40rpx;
			}
			.linkBtn2{
				top: 202rpx;
			}
			
			.getNotification{
				position: absolute;
				bottom: 211rpx;
				left: 32rpx;
				height: 184rpx;
				width: 600rpx;
				overflow: hidden;
				
				.eachNotification{
					width: 300rpx;
					height: 88rpx;
					padding-left: 20rpx;
					margin-bottom: 8rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					background: rgba(255, 71, 46, 0.8);
					border: 2rpx solid #FFDC82;
					border-radius: 43px;
				}
			}
		}
	}
	
	.recruitTimeBox{
		position: relative;
		z-index: 2;
		margin-top: -205rpx;
		height: 408rpx;
		padding: 0 32rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/recruitTimeBoxBj.png') no-repeat center 166rpx;
		background-size: 100% 172rpx;
		
		.contBox{
			position: relative;
			width: 100%;
			height: 100%;
			
			.contTopBox{
				position: relative;
				z-index: 2;
				
				.titImg{
					display: block;
					width: 604rpx;
					height: 102rpx;
					margin: 0 auto;
				}
				.activityTime{
					width: 604rpx;
					height: 52rpx;
					margin: 6rpx auto 0;
					font-weight: bold;
					font-size: 24rpx;
					line-height: 52rpx;
					text-align: center;
					color: #EE4231;
					background: #FFF3C7;
					border-radius: 0px 0px 12rpx 12rpx;
				}
			}
			
			.contBottomBox{
				position: relative;
				z-index: 1;
				height: 304rpx;
				width: 686rpx;
				margin: -64rpx auto 0;
				padding-top: 100rpx;
				padding-left: 24rpx;
				background: url('https://lovebirdopen.com/static/img/recruitOfficer/contBottomBoxBj.png') no-repeat;
				background-size: 100% 100%;
				
				.wineBottle{
					position: absolute;
					bottom: -16rpx;
					right: 0;
					width: 200rpx;
					height: 250rpx;
				}
				.tips{
					width: 504rpx;
					height: 54rpx;
					margin-bottom: 8rpx;
					font-size: 28rpx;
					line-height: 54rpx;
					color: #FFFFFF;
					text-align: center;
					background: url('https://lovebirdopen.com/static/img/recruitOfficer/line1.svg') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
	
	.inviteFriends{
		width: 590rpx;
		height: 96rpx;
		margin: 58rpx auto 0;
		font-weight: 900;
		font-size: 36rpx;
		line-height: 88rpx;
		color: #FFF2D8;
		text-align: center;
		background: linear-gradient(180deg, #F1743F 0%, #FF472E 100%);
		border-radius: 132px;
		border: 4rpx solid #FFE6A5;
	}
	
	.inviteWay{
		margin-top: 20rpx;
		margin-bottom: 38rpx;
		text-align: center;
		
		.way{
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.8);
			
			.wayImg{
				// display: inline-block;
				float: left;
				width: 40rpx;
				height: 40rpx;
				margin-right: 4rpx;
			}
		}
		.way1{
			padding-right: 20rpx;
			border-right: 2rpx solid rgba(255, 255, 255, 0.8);
		}
		.way2{
			padding-left: 20rpx;
		}
	}
	
	.bigBox{
		padding: 0 32rpx;
	}
	.bigGroupBox{
		padding: 4rpx 12rpx 32rpx;
		margin-bottom: 48rpx;
		border-top: 10rpx solid #FFEBB7;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/bigGroupBoxBj.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 36rpx;
		text-align: center;
		
		.groupTit{
			width: 296rpx;
			height: 52rpx;
			margin: 0 auto 16rpx;
			font-weight: bold;
			font-size: 24rpx;
			line-height: 52rpx;
			color: #EE4231;
			background: #FFF3C7;
			border-radius: 0px 0px 12rpx 12rpx;
		}
		.countDown{
			position: relative;
			display: inline-block;
			padding: 0 116rpx;
			height: 48rpx;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: rgba(0, 0, 0, 0.84);
			
			.countDownI{
				margin-left: 4rpx;
			}
		}
		.countDown:after{
			position: absolute;
			content: '';
			top: 50%;
			left: 0;
			width: 100rpx;
			height: 2rpx;
			margin-top: -1rpx;
			background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,0));
		}
		.countDown:before{
			position: absolute;
			content: '';
			top: 50%;
			right: 0;
			width: 100rpx;
			height: 2rpx;
			margin-top: -1rpx;
			background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0));
		}
		.groupMembers{
			margin-bottom: 48rpx;
			.eachSeat{
				float: left;
				padding-top: 24rpx;
				width: 20%;
				
				.img{
					width: 84rpx;
					height: 84rpx;
					margin: 0 auto 8rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.img1{
					border: 2rpx solid #F9CB55;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.img2{
					border: 2rpx dashed #F9CB55;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
				
				.name{
					font-size: 24rpx;
					line-height: 36rpx;
				}
				.name1{
					color: rgba(0, 0, 0, 0.84);
				}
				.name2{
					color: rgba(0, 0, 0, 0.4);
				}
				
				.prizeImg{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name3{
					display: inline-block;
					padding: 0 8rpx;
					color: #fff;
					background-color: #FF5238;
					border-radius: 21px;
				}
			}
		}
		
		.ePrizesButton{
			width: 330rpx;
			height: 96rpx;
			padding: 6rpx;
			margin: 0 auto 36rpx;
			background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);
			border-radius: 132rpx;
			border: 4rpx solid rgba(255,230,165,1);
			.btn{
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 74rpx;
				font-weight: 900;
				font-size: 36rpx;
				color: #FFF2D8;
				background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);
				border: 1rpx solid rgba(255, 235, 183, 0.5);
				box-sizing: border-box;
				border-radius: 78rpx;
			}
		}
		
		.aEndedButton{
			width: 330rpx;
			height: 96rpx;
			padding: 6rpx;
			margin: 0 auto 36rpx;
			background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);
			opacity: 0.5;
			border-radius: 132rpx;
			border: 4rpx solid rgba(255,230,165,.5);
			.btn{
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 74rpx;
				font-weight: 900;
				font-size: 36rpx;
				color: #FFF2D8;
				background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);
				border: 1rpx solid rgba(255, 235, 183, 0.5);
				box-sizing: border-box;
				border-radius: 78rpx;
			}
		}
		
		.helpProcess{
			.tit{
				position: relative;
				display: inline-block;
				padding: 0 210rpx;
				margin-bottom: 8rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.3);
			}
			.tit:after{
				position: absolute;
				content: '';
				top: 50%;
				left: 0;
				width: 194rpx;
				height: 2rpx;
				margin-top: -1rpx;
				background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,0));
			}
			.tit:before{
				position: absolute;
				content: '';
				top: 50%;
				right: 0;
				width: 194rpx;
				height: 2rpx;
				margin-top: -1rpx;
				background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0));
			}
			
			.processBox{
				height: 88rpx;
				.cont{
					float: left;
					width: 21%;
					image{
						display: inline-block;
						width: 48rpx;
						height: 48rpx;
					}
					.processTit{
						margin-top: 4rpx;
						font-size: 24rpx;
						line-height: 36rpx;
						color: rgba(0, 0, 0, 0.3);
					}
				}
				.arrow{
					float: left;
					width: 18.5%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 50rpx;
						height: 15rpx;
					}
				}
			}
			
		}
	}
	
	.activityReward{
		height: 658rpx;
		margin-bottom: 52rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/activityRewardBj.png') no-repeat center 76rpx;
		background-size: 100% 582rpx;
		.titImg{
			width: 472rpx;
			height: 78rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.notice{
			width: 472rpx;
			height: 52rpx;
			margin: 0 auto 52rpx;
			padding: 0 8rpx;
			font-weight: bold;
			font-size: 24rpx;
			line-height: 52rpx;
			text-align: center;
			color: #EE4231;
			background: #FFF3C7;
			border-radius: 0px 0px 12rpx 12rpx;
		}
		
		.prizeBox{
			padding: 0 20rpx;
			.eachPrize{
				float: left;
				width: 50%;
				padding: 0 11rpx;
				.eachPrizeCont{
					height: 434rpx;
					width: 100%;
					padding: 4rpx;
					text-align: center;
					background: url('https://lovebirdopen.com/static/img/recruitOfficer/eachPrizeContBj.png') no-repeat;
					background-size: 100% 100%;
					.prizeImg{
						width: 100%;
						height: 264rpx;
						margin-bottom: 8rpx;
						border-radius: 7px 7px 0 0;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.prizeLabel{
						font-weight: bold;
						font-size: 24rpx;
						line-height: 36rpx;
						color: #FF5238;
					}
					.prizeName{
						font-size: 24rpx;
						line-height: 36rpx;
						color: #FF5238;
					}
					.seePrize{
						width: 250rpx;
						height: 48rpx;
						margin: 14rpx auto 0;
						font-size: 20rpx;
						line-height: 44rpx;
						color: #fff;
						background: linear-gradient(180deg, #FF782C 0%, #FF522C 100%);
						border: 2rpx solid #FFA978;
						border-radius: 8rpx;
					}
				}
			}
		}
		
	}
	
	.fortuneNine{
		.fortuneNineTit{
			width: 460rpx;
			height: 96rpx;
			margin: 0 auto 32rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.fortuneNineCont{
			.eachCont{
				display: flex;
				height: 256rpx;
				padding: 8rpx;
				margin-bottom: 16rpx;
				background: url('https://lovebirdopen.com/static/img/recruitOfficer/fortuneNineContBj.png') no-repeat center bottom #FFF8EE;
				background-size: 100% 72rpx;
				border-radius: 8rpx;
				align-items: center;
				justify-content: center;
				
				image{
					width: 200rpx;
					height: 100%;
					border-radius: 6rpx;
				}
				.ml32{
					margin-left: 32rpx;
				}
				.mr32{
					margin-right: 32rpx;
				}
				.contBox{
					flex: 1;
					width: 1px;
					
					.titBox{
						display: flex;
						height: 40rpx;
						font-weight: 900;
						align-items: center;
						font-size: 28rpx;
						color: #FF5238;
						image{
							width: 86rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
					.tipsCont{
						margin-top: 16rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #333333;
					}
				}
			}
			.pdl32{
				padding-left: 32rpx;
			}
			.pdr32{
				padding-right: 32rpx;
			}
		}
	}
	
	.technicalSupport{
		height: 40rpx;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #FFFFFF;
		image{
			width: 130rpx;
			height: 40rpx;
		}
		.iconMg{
			margin: 0 34rpx;
		}
	}
	
	// 弹窗
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: rgba(0, 0, 0, 0.8);
	}
	.nineArrive{
		position: fixed;
		top: 188rpx;
		left: 0;
		width: 100%;
		z-index: 101;
		
		.popBox{
			position: relative;
			// height: 1152rpx;
			
			.titBox{
				position: absolute;
				top: 0;
				left: 50%;
				width: 624rpx;
				height: 166rpx;
				margin-left: -312rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.tips{
				position: absolute;
				top: 122rpx;
				left: 0;
				width: 100%;
				height: 48rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 48rpx;
				text-align: center;
				color: #FFEDBD;
			}
			.contBox{
				position: absolute;
				top: 84rpx;
				left:0;
				width: 100%;
				height: 750rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.close{
				position: absolute;
				top: 834rpx;
				left:0;
				width: 100%;
				text-align: center;
			}
		}
	}
	
	.groupFailure{
		position: fixed;
		top: 188rpx;
		left: 0;
		width: 100%;
		z-index: 101;
		padding-top: 64rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/haloBj.png') no-repeat;
		background-size: 100% 100%;
		
		.popBox{
			width: 570rpx;
			height: 762rpx;
			margin: 0 auto 120rpx;
			padding-top: 176rpx;
			text-align: center;
			color: #FFEBB7;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/groupFailurePop.png') no-repeat;
			background-size: 100% 100%;
			
			.tips1{
				font-weight: bold;
				font-size: 36rpx;
				line-height: 56rpx;
			}
			.tips2{
				margin-top: 134rpx;
				font-size: 28rpx;
				line-height: 44rpx;
			}
			.makeBtn{
				width: 342rpx;
				height: 96rpx;
				margin: 36rpx auto 0;
				padding: 4rpx;
				background: linear-gradient(180deg, #FFEBB7 0%, #FFD37E 100%);
				border: 2rpx solid #FF3D00;
				border-radius: 132rpx;
				.btn{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 900;
					font-size: 32rpx;
					color: #F34A33;
					border: 1rpx solid rgba(255, 61, 0, 0.6);
					border-radius: 78rpx;
				}
			}
		}
		.close{
			width: 100%;
			text-align: center;
		}
	}
	
	.helpTa{
		position: fixed;
		top: 188rpx;
		left: 0;
		width: 100%;
		z-index: 101;
		padding-top: 64rpx;
		
		.popBox{
			width: 100%;
			height: 756rpx;
			margin-bottom: 80rpx;
			padding: 208rpx 144rpx 0;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/helpTaPopBj.png') no-repeat;
			background-size: 100% 100%;
			
			.contBox{
				width: 100%;
				height: 300rpx;
				margin-bottom: 152rpx;
				text-align: center;
				
				.helpBefore{
					.headPortrait{
						width: 96rpx;
						height: 96rpx;
						margin: 0 auto 8rpx;
						overflow: hidden;
						border-radius: 50%;
						border: 4rpx solid #FFFCF3;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.inviterTips{
						font-size: 12px;
						line-height: 18px;
						color: #FFFFFF;
					}
					
					.winePattern{
						width: 100%;
						height: 32rpx;
						margin: 16rpx 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.tips{
						font-weight: bold;
						font-size: 28rpx;
						line-height: 44rpx;
						color: #FFFFFF;
					}
				}
				
				.helpAfter{
					
					.helpAfterStates{
						width: 380rpx;
						height: 76rpx;
						margin: 0 auto 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 44rpx;
						color: #755D5A;
						background: url('https://lovebirdopen.com/static/img/recruitOfficer/helpAfterStatesBj.png') no-repeat;
						background-size: 100% 100%;
					}
					.color1{
						color: #ED4B34;
					}
					.winePattern{
						width: 100%;
						height: 32rpx;
						margin: 16rpx 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.tips{
						font-weight: bold;
						font-size: 28rpx;
						line-height: 44rpx;
						color: #FFFFFF;
					}
					.inviterTips{
						font-size: 12px;
						line-height: 18px;
						color: #FFFFFF;
					}
				}
			}
			
			.helpBtn{
				width: 328rpx;
				height: 96rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 900;
				font-size: 32rpx;
				color: #FFF2D8;
				background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);
				box-shadow: 0px 6rpx 0px #F59F39, inset 0px -6rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 78rpx;
			}
		}
		
		
		.close{
			width: 100%;
			text-align: center;
		}
	}
	
	.activityRules{
		position: fixed;
		top: 188rpx;
		left: 50%;
		width: 642rpx;
		height: 882rpx;
		z-index: 101;
		margin-left: -321rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/activityRulesBj.png') no-repeat center 76rpx;
		background-size: 100% 810rpx;
		
		.titImg{
			width: 456rpx;
			height: 84rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.contBox{
			height: 800rpx;
			padding: 44rpx 36rpx 46rpx 50rpx;
			.cont{
				height: 100%;
				padding-right: 36rpx;
				overflow-x: hidden;
				overflow-y: auto;
			}
			//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
			.cont::-webkit-scrollbar
			{
				width: 16rpx;
				background-color: #FFF3C7;
			}
			  
			//定义滚动条轨道 内阴影+圆角
			.cont::-webkit-scrollbar-track
			{
				// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
				border-radius: 18rpx;
				background-color: #FFF3C7;
			}
			  
			//定义滑块 内阴影+圆角
			.cont::-webkit-scrollbar-thumb
			{
				border-radius: 18rpx;
				-webkit-box-shadow: inset 0 0 12rpx rgba(255,180,149,.3);
				background-color: #FFB495;
			}
			
			.eachCont{
				font-size: 28rpx;
				line-height: 56rpx;
				color: #333333;
				text{
					color: #FF5238;
				}
			}
		}
	}
	
	
	
	
	
	
	
</style>
